<template>
    <view class="con">
        <view class="profit">
            <image src="../../../../static/img/myhome/yuer-bg@3x.png" mode="scaleToFill"></image>
            <view class="profit-con">
                <view class="profit-con-name">累计总抽佣金额</view>
                <view class="profit-con-price"><text>￥</text>{{data.all_cy}}</view>
            </view>
        </view>
        
        <view class="select-time">
            <view class="select-time-s" @click="handPicker(1)">
                <text>{{stime}}</text>
                <u-icon name="arrow-down-fill" size="22" color="#999999"></u-icon>
            </view>
            <view class="select-time-z">~</view>
            <view class="select-time-s" @click="handPicker(2)">
                <text>{{etime}}</text>
                <u-icon name="arrow-down-fill" size="22" color="#999999"></u-icon>
            </view>
        </view>
        
        <view class="list">
            <u-sticky>
                <view class="list-title">抽佣记录</view>
            </u-sticky>
            <view class="list-i">
                <view class="list-i-item" v-for="(item,index) in data.list" :key="index" @click="toDetail(item.order_on)">
                    <view style="display: flex;align-items: center;">
                        <image src="../../../../static/img/myhome/home-jinbi@3x.png"></image>
                        <view class="list-i-item-time">
                            <view class="list-i-item-time-name">{{item.phone_name}}</view>
                            <view class="list-i-item-time-name">{{item.location_address}}</view>
                            <view class="list-i-item-time-t">{{item.add_time | date}}</view>
                        </view>
                    </view>
                    <view class="list-i-item-price">{{item.order_cy}}</view>
                </view>
                <u-loadmore
                    :status="status" 
                    :load-text="loadText" />
            </view>
        </view>
        
        <u-picker mode="time" v-model="pickerShow" @confirm="pickerConfirm"></u-picker>
        <u-popup v-model="popupShow" mode="bottom" closeable>
            <view class="popup-view">
                <scroll-view scroll-y="true" style="height: 800rpx">
                    <view v-for="(item,index) in wpList" :key="index" style="margin: 30rpx;padding: 30rpx 20rpx;background-color: #FFFFFF;border-radius: 20rpx;">
                        <view style="display: flex;justify-content: space-between;">
                            <text style="">物品名称: {{item.wp_name}}</text>
                        </view>
                        <view style="display: flex;justify-content: space-between;">
                            <text>抽佣比例: {{item.proportion}}</text>
                            <text>抽佣金额: ￥{{item.money}}</text>
                        </view>
                        <view style="display: flex;justify-content: space-between;">
                            <text>订单金额: ￥{{item.order_price}}</text>
                            <text>下单时间: {{item.addtime | date}}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                stime: '',
                etime: '',
                params: {
                    stime: '',//本周开始时间(时间戳)
                    etime: '', //本周结束时间(时间戳)
                    page: 1, //当前页数
                    limit:20, //每页数量[不传默认20]
                },
                data: {},
                status: 'loading',
                loadText: {
                    loadmore: '上拉加载更多',
                    loading: '加载中...',
                    nomore: '没有更多数据了'
                },
                pickerShow: false,
                pickerStatus: 1,
                popupShow: false,
                olPage: 1,
                wpList: [],
            }
        },
        onLoad() {
            // 今天
            var date = new Date();
            var year = date.getFullYear(); //获取当前年份
            var mon = date.getMonth() + 1; //获取当前月份
            var day = date.getDate(); //获取当前日
            this.params.todaystime = Date.parse(year + '-' + mon + '-' + day + ' 00:00:00') / 1000;
            this.params.todayetime = Date.parse(year + '-' + mon + '-' + day + ' 23:59:59') / 1000;
            this.stime = year + '-' + mon + '-' + day;
            this.etime = year + '-' + mon + '-' + day;
            this._getHsAmount();
        },
        onReachBottom() {
            this.params.page++;
            this._getHsAmount();
        },
        methods: {
            toDetail(order_on) {
                this.popupShow = true;
                this._getOrderDetail(order_on);
            },
            pickerConfirm(e) {
                if(this.pickerStatus == 1) {
                    this.params.todaystime = Date.parse(e.year + '-' + e.month + '-' + e.day + ' 00:00:00') / 1000;
                    // this.params.todayetime = Date.parse(e.year + '-' + e.month + '-' + e.day + ' 23:59:59') / 1000;
                    this.stime = e.year + '-' + e.month + '-' + e.day;
                    // this.etime = e.year + '-' + e.month + '-' + e.day;
                } else if (this.pickerStatus == 2) {
                    // this.params.todaystime = Date.parse(e.year + '-' + e.month + '-' + e.day + ' 00:00:00') / 1000;
                    this.params.todayetime = Date.parse(e.year + '-' + e.month + '-' + e.day + ' 23:59:59') / 1000;
                    // this.stime = e.year + '-' + e.month + '-' + e.day;
                    this.etime = e.year + '-' + e.month + '-' + e.day;
                    uni.showLoading({
                        title: '加载中'
                    });
                    this._getHsAmount();
                }
            },
            handPicker(status) {
                this.pickerShow = true;
                this.pickerStatus = status;
            },
            _getOrderDetail(order_on) {
                this.$u.api.getOrderDetail({oid: order_on}).then(res => {
                    this.wpList = res.list;
                })
            },
            _getHsAmount() {
                this.status = 'loading';
                this.$u.api.getHsAmount(this.params).then(res => {
                    uni.hideLoading();
                    if(this.params.page == 1) {
                        this.status = 'nomore';
                        this.data = res;
                    } else {
                        if(res.list <= 0) {
                            this.status = 'nomore';
                            this.params.page = this.olPage;
                            return ;
                        }
                        this.olPage = this.params.page;
                        this.data.list = this.data.list.concat(res.list);
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .con {
        // padding: 30rpx;
        
        .profit {
            position: relative;
            width: 100%;
            height: 300rpx;
            border-radius: 20rpx;
            
            image {
                width: 100%;
                height: 300rpx;
                border-radius: 20rpx;
            }
            
            .profit-con {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 9;
                
                .profit-con-name {
                    color: #ffffff;
                    font-size: 28rpx;
                    padding: 53rpx 0 20rpx 42rpx;
                }
                
                .profit-con-price {
                    color: #ffffff;
                    font-size: 70rpx;
                    font-weight: bold;
                    padding-left: 42rpx;
                    
                    text {
                        font-size: 40rpx;
                    }
                }
            }
        }
        
        .select-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #FFFFFF;
            margin: 0 30rpx 30rpx 30rpx;
            padding: 20rpx 30rpx;
            
            .select-time-s {
                width: 270rpx;
                height: 60rpx;
                background-color: #f7f7f7;
                border-radius: 10rpx;
                font-size: 28rpx;
                color: #999999;
                line-height: 60rpx;
                text-align: center;
                
                text {
                    margin-right: 30rpx;
                }
            }
            
            .select-time-z {
                font-size: 28rpx;
                color: #999999;
            }
        }
        
        .list {
            background-color: #FFFFFF;
            margin: 0 30rpx;
            border-radius: 20rpx;
            
            .list-title {
                font-size: 32rpx;
                color: #191919;
                font-weight: bold;
                padding: 40rpx;
                background-color: #FFFFFF;
                border-radius: 20rpx;
            }
            
            .list-i {
                
                padding-bottom: env(safe-area-inset-bottom);
                
                .list-i-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1rpx solid #f2f2f2;
                    padding: 30rpx;
                    
                    image {
                        width: 58rpx;
                        height: 58rpx;
                        margin-right: 30rpx;
                    }
                    .list-i-item-time {
                        
                        
                        .list-i-item-time-name {
                            font-size: 28rpx;
                            color: #191919;
                            font-weight: bold;
                            width: 400rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        
                        .list-i-item-time-t {
                            color: #999999;
                            font-size: 24rpx;
                        }
                    }
                    
                    .list-i-item-price {
                        font-size: 36rpx;
                        color: #07c160;
                        font-weight: bold;
                    }
                }
            }
        }
        
    }
    
    .popup-view {
        padding-bottom: env(safe-area-inset-bottom);
        background-color: #f2f2f2;
    }
    
</style>
